<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!-- top -->
    <el-row class="top">
      <el-col :span="6" class="top-text">阿 飞 天 气</el-col>
      <el-col :span="6" class="top-ipt" style="display: flex">
        <input placeholder="输入搜索的地区!" class="ipt" type="text" :plain="true" @keyup.enter="getWeather" v-model="city" />
        <div class="search" :plain="true" @click="getWeather">搜索</div>
      </el-col>
      <el-col :span="6"><br></el-col>
      <el-col class="top-time" :span="5">{{ time }}</el-col>
    </el-row>
    <!-- 当天card -->
    <el-row class="transparent">
      <el-col style="display: flex">
        <el-card shadow="hover" style="width: 700px">
          <!-- 地区 -->
          <div class="address">
            {{ today.city }}
            <!-- <span v-if="today.province != today.city">{{ today.city }}</span>&nbsp; -->
            <span style="margin-left: 285px; font-size: 12px">数据更新时间：{{ today.time }}</span>
          </div>
          <br />
          <!-- 天气图标 -->
          <div style="display: flex">
            <!-- <div class="img">
              <img src="../images/晴（白）.png" v-if="today.weatherType == 0" alt="" />
              <img src="../images/多云（白）.png" v-if="today.weatherType == 1" alt="" />
              <img src="../images/阴（白）.png" v-if="today.weatherType == 2" alt="" />
              <img src="../images/阵雨.png" v-if="today.weatherType == 3" alt="" />
              <img src="../images/雷阵雨.png" v-if="today.weatherType == 4" alt="" />
              <img src="../images/大雪.png" v-if="today.weatherType == 5" alt="" />
              <img src="../images/雨夹雪.png" v-if="today.weatherType == 6" alt="" />
              <img src="../images/小雨.png" v-if="today.weatherType == 7" alt="" />
              <img src="../images/中雨.png" v-if="today.weatherType == 8" alt="" />
              <img src="../images/大雨.png" v-if="today.weatherType == 9" alt="" />
              <img src="../images/大暴雨.png" v-if="today.weatherType == 10" alt="" />
              <img src="../images/大雪.png" v-if="today.weatherType == 13" alt="" />
              <img src="../images/中雪.png" v-if="today.weatherType == 14" alt="" />
              <img src="../images/中雪.png" v-if="today.weatherType == 15" alt="" />
              <img src="../images/大雪.png" v-if="today.weatherType == 16" alt="" />
              <img src="../images/大雪.png" v-if="today.weatherType == 17" alt="" />
              <img src="../images/雾.png" v-if="today.weatherType == 18" alt="" />
              <img src="../images/中雨.png" v-if="today.weatherType == 19" alt="" />
              <img src="../images/雾.png" v-if="today.weatherType == 20" alt="" />
              <img src="../images/沉浮.png" v-if="today.weatherType == 29" alt="" />
              <img src="../images/雾霾.png" v-if="today.weatherType == 45 || today.weatherType == 53" alt="" />
              <img src="../images/沉浮.png" v-if="today.weatherType == 30" alt="" />
            </div> -->
            <div class="temperature">{{ today.weather[0].low }} <br> {{ today.weather[0].high }}</div>
            <div class="weather">{{ today.weather[0].type }}</div>
          </div>
          <div class="tips">
            {{ today.weather[0].notice }}<br />
          </div>
          <div style="display: flex">
            <div class="details">
              <div class="details-1">风级</div>
              <div class="details-2">{{ today.weather[0].fl }}</div>
            </div>
            <div class="details">
              <div class="details-1">风向</div>
              <div class="details-2">{{ today.weather[0].fx }}</div>
            </div>
            <div class="details">
              <div class="details-1">空气质量指数</div>
              <div class="details-2">{{ today.weather[0].aqi }}</div>
            </div>
            <div class="details">
              <div class="details-1">日出时间</div>
              <div class="details-2">{{ sunrise }}</div>
            </div>
            <div class="details">
              <div class="details-1">日落时间</div>
              <div class="details-2">{{ sunset }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 近七日card -->
    <el-row class="transparent">
      <h1 style="color: #fff; margin-left: 30px">{{ today.city }}近两周天气</h1>
      <div style="width: 100%; height: 300px" v-if="res.code != 0"></div>
      <el-col :span="8" v-for="(item, index) in weather" :key="index">
        <el-card>
          <div style="float: left;color: #fff;">{{ today.city }}</div>
          <div style="font-size: 12px; color: #fff; margin-left: 230px">
            日期：{{ item.ymd }}
          </div>
          <!-- 天气图标 -->
          <div style="display: flex">
            <!-- <div class="img">
              <img src="../images/晴（白）.png" v-if="item.weatherType == 0" alt="" />
              <img src="../images/多云（白）.png" v-if="item.weatherType == 1" alt="" />
              <img src="../images/阴（白）.png" v-if="item.weatherType == 2" alt="" />
              <img src="../images/阵雨.png" v-if="item.weatherType == 3" alt="" />
              <img src="../images/雷阵雨.png" v-if="item.weatherType == 4" alt="" />
              <img src="../images/大雪.png" v-if="item.weatherType == 5" alt="" />
              <img src="../images/雨夹雪.png" v-if="item.weatherType == 6" alt="" />
              <img src="../images/小雨.png" v-if="item.weatherType == 7" alt="" />
              <img src="../images/中雨.png" v-if="item.weatherType == 8" alt="" />
              <img src="../images/大雨.png" v-if="item.weatherType == 9" alt="" />
              <img src="../images/大暴雨.png" v-if="item.weatherType == 10" alt="" />
              <img src="../images/大雪.png" v-if="item.weatherType == 13" alt="" />
              <img src="../images/中雪.png" v-if="item.weatherType == 14" alt="" />
              <img src="../images/中雪.png" v-if="item.weatherType == 15" alt="" />
              <img src="../images/大雪.png" v-if="item.weatherType == 16" alt="" />
              <img src="../images/大雪.png" v-if="item.weatherType == 17" alt="" />
              <img src="../images/雾.png" v-if="today.weatherType == 18" alt="" />
              <img src="../images/中雨.png" v-if="item.weatherType == 19" alt="" />
              <img src="../images/雾.png" v-if="today.weatherType == 20" alt="" />
              <img src="../images/沉浮.png" v-if="item.weatherType == 29" alt="" />
              <img src="../images/雾霾.png" v-if="item.weatherType == 45 || item.weatherType == 53" alt="" />
              <img src="../images/沉浮.png" v-if="item.weatherType == 30" alt="" />
            </div> -->
            <div class="temperature2">{{ item.low }} — {{ item.high }}</div>
            <div class="weather2">{{ item.weather }}</div>
          </div>
          <div style="display: flex">
            <div class="details2">
              <div class="details2-1">风级</div>
              <div class="details2-2">
                {{ item.wind }}{{ item.fl }}
              </div>
            </div>
            <div class="details2">
              <div class="details2-1">风向</div>
              <div class="details2-2">{{ item.fx }}</div>
            </div>
            <div class="details2">
              <div class="details2-1">空气质量指数</div>
              <div class="details2-2">{{ item.aqi }}</div>
            </div>
            <div class="details2">
              <div class="details2-1">日出时间</div>
              <div class="details2-2">
                {{ item.sunrise }}
              </div>
            </div>
            <div class="details2">
              <div class="details2-1">日落时间</div>
              <div class="details2-2">
                {{ item.sunset }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      res: "",
      city: "",
      time: "",
      today: "",
      sunrise: "",
      sunset: "",
      weather: "",
      loading: true,
      historyCity: "",
      tip: "",
    };
  },
  mounted() {
    // 北京时间
    axios
      .get(
        "https://api.a20safe.com/api.php?api=2&key=e5f907b4ba1f08c8503433a5da97f0c9"
      )
      .then((res) => {
        let time = res.data.data[0].time.split("").slice(0, 16).join("");
        this.time = time;
      });
    setInterval(() => {
      axios
        .get(
          "https://api.a20safe.com/api.php?api=2&key=e5f907b4ba1f08c8503433a5da97f0c9"
        )
        .then((res) => {
          // console.log(res);
          let time = res.data.data[0].time.split("").slice(0, 16).join("");
          this.time = time;
        });
    }, 3000);

    // 默认展示地区天气(西安)
    this.historyCity = localStorage.getItem('history')
    if (this.historyCity == null) {
      this.historyCity = '西安'
    }
    axios
      .get(
        "https://api.a20safe.com/api.php?api=11&key=e5f907b4ba1f08c8503433a5da97f0c9&city=" + this.historyCity
      )
      .then((res) => {
        console.log(res);

        // 页面加载失败

        if (res.data.msg == "响应超时，请重试" ||res.data == '' || res.data.data[0].total == '解析失败，请尝试重新获取') {
          this.$message({
            message: "请求失败!",
            type: "warning",
            showClose: true,
          });
          return
        }


        // console.log(res.data.data[0].weather[0].moreData.alert.pop());
        // console.log(this.tip);
        // console.log(res.data.data[0].weather[0].weatherType);
        this.res = res.data;
        // 当天天气
        // console.log(res.data.data[0].weather[0]);
        this.today = res.data.data[0];
        // 当天日出日落
        // console.log(res.data.data[0].weather[0].moreData);
        this.sunrise = res.data.data[0].weather[0].sunrise
        this.sunset = res.data.data[0].weather[0].sunset
        // 近七天天气
        // console.log(res.data.data[0].weather);
        let weather = res.data.data[0].weather.slice(1, 14);
        this.weather = weather;
        // console.log(weather);
        setTimeout(() => {
          this.loading = false;
        }, 0);
      });
  },
  methods: {
    getWeather() {
      this.loading = true;
      axios
        .get(
          "https://api.a20safe.com/api.php?api=11&key=e5f907b4ba1f08c8503433a5da97f0c9&city=" +
          this.city
        )
        .then((res) => {
          if (res.data.code == 105) {
            this.$message({
              message: "城市名错误或不完整!",
              type: "warning",
              showClose: true,
            });
            this.loading = false;
          } else if (res.data.code == 0) {
            this.today = res.data.data[0]
            this.$message({
              message: this.city + "天气请求成功!",
              type: "success",
              showClose: true,
            });
            this.historyCity = localStorage.setItem('history', this.city)
            this.loading = false;
          } else {
            this.$message({
              message: "接口出错，请重新搜索!",
              type: "error",
              showClose: true,
            });
            this.loading = false;
          }
          console.log(res);
          if (res.data.data[0].weather[0].moreData.alert != null) {
            this.tip = res.data.data[0].weather[0].moreData.alert[0]
          }
          if (res.data.data[0].weather[0].moreData.alert == null) {
            this.tip = { title: '暂无数据' }
          }
          if (res.data.code != 0 || res.data == '' || res.data.data[0].total == '解析失败，请尝试重新获取') {
            location.reload();
          }
          // console.log(res.data.data[0].weather[0]);
          this.today = res.data.data[0].weather[0];
          this.sunrise = res.data.data[0].weather[0].moreData.sunrise
            .split("")
            .slice(11, 19)
            .join("");
          this.sunset = res.data.data[0].weather[0].moreData.sunset
            .split("")
            .slice(11, 19)
            .join("");
          let weather2 = res.data.data[0].weather.slice(1, 7);
          // console.log(weather2);
          this.weather = weather2;
        });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.transparent {
  opacity: 0.7;
}

.top-text {
  font-size: 36px;
  font-weight: 700;
  color: rgb(89, 218, 238);
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  font-family: '华文新魏';
}

.ipt {
  width: 230px;
  height: 26px;
  padding: 5px 8px;
  color: #000;
  background-color: rgb(169, 169, 233);
  font-size: 20px;
  outline: none;
  border: 2px solid rgb(87, 182, 197);
}

.search {
  border-radius: 0 16px 16px 0;
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background-color: rgb(87, 182, 197);
}

.el-row {
  margin: 0 20px;
}

.top-time {
  width: auto;
  padding: 0 12px;
  border-radius: 15px;
  line-height: 40px;
  font-size: 20px;
  color: #fff;
  background-color: rgb(87, 182, 197);
  margin-top: 20px;
  margin-bottom: 20px;
}

.top-ipt {
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-card {
  margin: 8px;
  background-color: rgb(114, 114, 234);
}

.img {
  width: 160px;
  height: 80px;
}

.img img {
  width: 100%;
  height: 100%;
}

.address {
  font-size: 20px;
  color: #fff;
}

.temperature {
  width: 200px;
  font-size: 30px;
  color: #fff;
  line-height: 80px;
  font-weight: 700;
}

.weather {
  font-size: 35px;
  color: #fff;
  font-weight: 700;
  line-height: 80px;
}

.temperature2 {
  font-size: 20px;
  color: #fff;
  line-height: 80px;
}

.weather2 {
  font-size: 20px;
  color: #fff;
  line-height: 80px;
  margin-left: 30px;
}

.tips {
  color: orange;
  font-size: 18px;
}

.details {
  width: auto;
  margin-top: 10px;
  margin-bottom: 6px;
  margin-right: 36px;
}

.details-1 {
  font-size: 12px;
  color: #ccc;
}

.details-2 {
  color: #fff;
  font-size: 16px;
}

.details2 {
  width: 100px;
}

.details2-1 {
  font-size: 12px;
  color: #ccc;
}

.details2-2 {
  color: #fff;
}

.tip {
  width: 980px;
}

.tip-time {
  position: absolute;
  right: 40px;
}
</style>